<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 巴士运营管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            width: 100%;
            max-width: 500px;
        }
        .manga-panel {
            background-color: white;
            border: 4px solid black;
            padding: 30px;
            position: relative;
            overflow: hidden;
            box-shadow: 8px 8px 0 #000;
        }
        .manga-title {
            font-size: 28px;
            font-weight: 900;
            text-align: center;
            margin-bottom: 25px;
            letter-spacing: 2px;
            text-shadow: 2px 2px 0 #000;
            -webkit-text-stroke: 1px black;
            color: white;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .manga-label {
            display: block;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .manga-input {
            width: 100%;
            padding: 10px 12px;
            background-color: white;
            border: 2px solid black;
            font-size: 16px;
        }
        .manga-button {
            width: 100%;
            padding: 12px 20px;
            background-color: black;
            color: white;
            font-weight: bold;
            font-size: 18px;
            border: none;
            cursor: pointer;
            transition: transform 0.2s;
            box-shadow: 4px 4px 0 #666;
        }
        .manga-button:hover {
            transform: scale(1.05);
        }
        .manga-speech-bubble {
            padding: 12px;
            background-color: white;
            border: 2px solid black;
            position: relative;
            margin-bottom: 20px;
        }
        .manga-error {
            background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.1) 5px, rgba(0,0,0,0.1) 10px);
        }
        .manga-error-list {
            list-style-type: none;
            padding-left: 0;
        }
        .manga-error-list li {
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }
        .manga-error-list li::before {
            content: '✖';
            margin-right: 8px;
            font-weight: bold;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="manga-panel">
            <h2 class="manga-title">新用户注册</h2>
            
            <div id="error-container" class="manga-speech-bubble manga-error hidden">
                <ul id="error-list" class="manga-error-list"></ul>
            </div>
            
            <form id="register-form">
                <div class="form-group">
                    <label for="email" class="manga-label">邮箱：</label>
                    <input type="email" id="email" name="email" required class="manga-input">
                </div>
                
                <div class="form-group">
                    <label for="full_name" class="manga-label">姓名：</label>
                    <input type="text" id="full_name" name="full_name" required class="manga-input">
                </div>
                
                <div class="form-group">
                    <label for="phone" class="manga-label">手机号：</label>
                    <input type="text" id="phone" name="phone" class="manga-input">
                </div>
                
                <div class="form-group">
                    <label for="password1" class="manga-label">密码：</label>
                    <input type="password" id="password1" name="password1" required class="manga-input">
                </div>
                
                <div class="form-group">
                    <label for="password2" class="manga-label">确认密码：</label>
                    <input type="password" id="password2" name="password2" required class="manga-input">
                </div>
                
                <button type="submit" class="manga-button" id="submit-button">立即注册</button>
            </form>
            
            <p class="manga-text" style="text-align: center; margin-top: 20px;">
                已有账号？<a href="/login">立即登录</a>
            </p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const registerForm = document.getElementById('register-form');
            const errorContainer = document.getElementById('error-container');
            const errorList = document.getElementById('error-list');
            const submitButton = document.getElementById('submit-button');
        
            // 显示错误信息
            function showErrors(errors) {
                errorList.innerHTML = '';
                errors.forEach(error => {
                    const li = document.createElement('li');
                    li.textContent = error;
                    errorList.appendChild(li);
                });
                errorContainer.classList.remove('hidden');
            }
        
            // 获取CSRF Token
            function getCSRFToken() {
                const cookieValue = document.cookie
                    .split('; ')
                    .find(row => row.startsWith('csrftoken='))
                    ?.split('=')[1];
                return cookieValue || '';
            }
        
            // 表单提交处理
            registerForm.addEventListener('submit', async function(event) {
                event.preventDefault();
                
                // 禁用按钮防止重复提交
                submitButton.disabled = true;
                submitButton.textContent = '注册中...';
        
                // 收集表单数据
                const formData = {
                    email: document.getElementById('email').value.trim(),
                    full_name: document.getElementById('full_name').value.trim(),
                    phone: document.getElementById('phone').value.trim() || null,
                    password: document.getElementById('password1').value,
                    password_confirm: document.getElementById('password2').value
                };
        
                try {
                    // 发送注册请求
                    const response = await fetch('http://127.0.0.1:8000/api/auth/register', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': getCSRFToken(),
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(formData)
                    });
        
                    // 处理响应
                    if (response.ok) {
                        // 注册成功，跳转到登录页
                        window.location.href = '/login';  // 修改为跳转到登录页
                    } else {
                        // 显示服务器返回的错误信息
                        const errorData = await response.json();
                        const errorMsg = errorData.detail || errorData.message || '注册失败，请检查输入';
                        showErrors([errorMsg]);
                    }
                } catch (error) {
                    // 网络错误处理
                    showErrors(['网络连接错误，请稍后再试']);
                    console.error('注册错误:', error);
                } finally {
                    // 恢复按钮状态
                    submitButton.disabled = false;
                    submitButton.textContent = '立即注册';
                }
            });
        
            // 表单验证（可选）
            function validateForm() {
                const errors = [];
                // 这里可以添加你的前端验证逻辑
                return errors;
            }
        });
        </script>
</body>
</html>